// yarn add styled-components
// https://mp.weixin.qq.com/s/oywTpNKEikMXn8QTBgITow
import React, { PureComponent } from "react";
import styled from "styled-components";
import Demo1 from './demo1'
// 普通的用法
const CSSWrapper = styled.div`
  .title {
    color: red;
    .title_son {
      font-size: 20px;
      color: lime;
    }
    .test {
      color: ${(props) => props.colorProps};
    }
  }
`;

const SonWrapper = styled.span`
/* 继承至上级的CSS */
  .biu { 
      background-color:${props=>props.colorProps};
  }

`

class Index extends PureComponent {
  state = {};
  render() {
    return (
      <CSSWrapper colorProps={"blue"}>
        <div className="title">
          asd
          <span className="title_son">儿子阿</span>
          <hr />
          <span className="test">动态传入数据</span>
          <hr/>
          <Demo1/>
        </div>
          <SonWrapper>
              <div className="biu">ASDAS</div>
          </SonWrapper>
      </CSSWrapper>
    );
  }
}

export default Index;
